<template>
	<uv-popup @change="changeShow" :closeable="true" :closeOnClickOverlay="false" ref="verify" round="20rpx">
		<view class="tn-p-xs">

			<view style="position:relative;">
				<image :src="bgimg" class="image-bgimg" />
				<image :src="water" class="image-water" style="" :style="[{ left: xleft1 + 'px' }]" />

				<movable-area class="slider" v-if="enable" @mouseup="confirm">

					<view class="slider-bar">
						<view class="slider-bar-txt">滑动滑块完成拼图</view>
					</view>

					<movable-view class="slider-btn" :x="xleft0" @touchend="confirm" @change="moveEvent"
						direction="horizontal">
						<view class="tn-round tn-blue_bg flex-center" style="width:100rpx;height:100rpx;">
							<uv-icon name="arrow-right" color="white" size="50rpx" />
						</view>
					</movable-view>

				</movable-area>

				<!-- 显示拖拽占位 -->
				<view class="slider" v-if="!enable">
					<view class="slider-bar">
						<view class="slider-bar-txt">滑动滑块完成拼图</view>
					</view>
					<view class="slider-btn">
						<view class="tn-round tn-blue_bg flex-center" style="width:100rpx;height:100rpx;">
							<uv-icon name="arrow-right" color="white" size="50rpx" />
						</view>
					</view>
				</view>

				<uv-notify ref="notify" :safeAreaInsetTop="true" :duration="1500" type="error" />

			</view>

			<view class="flex-center">
				<uv-button text="刷新图片" @click='showImage(true)' customStyle="border:none;backgroup:none" />
			</view>

		</view>
	</uv-popup>
</template>

<script lang="ts">
export { default } from "./m-show-verify-image"
</script>

<style lang="scss" scoped>
@import "./m-show-verify-image.scss"
</style>